// 样式-标题
import React, { useEffect, useState } from 'react';
import { Input, Switch, InputNumber, /*Collapse*/ } from 'antd';
import FormItem from 'antd/lib/form/FormItem';
import { filterObjectNullKeys } from 'src/libs/utils';
import Editor from './Editor';
import InputColorPicker from './InputColorPicker';
import { debounce } from 'src/libs/utils';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
}

const Title = ( props: IProps ) => {
	// const { Panel } = Collapse;
	const { config, onValuesChange, form } = props;
	const [ titleBgColor, setTitleBgColor ] = useState( config.style.titleBg || 'rgba(134,188,37,1)' );

	// console.log( props, config.style, titleBgColor );
	// console.log( config,form.getFieldsValue() );

	useEffect( () => {
		setTitleBgColor( config.style.titleBg || 'rgba(134,188,37,1)' );
	}, [ config ] );

	const handleChangeBgColorComplete = ( color ) => {
		setTitleBgColor( color );
		form.setFieldsValue( { titleBg: color } );
		// console.log( form.getFieldsValue() );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	const onBlur = () => {
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	return (
		<div key="title">
			<FormItem label="是否显示" name="titleShow" valuePropName="checked" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<Switch defaultChecked={true} />
			</FormItem>
			<FormItem label="标题内容" name="titleValue" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<Input onBlur={onBlur} onPressEnter={onBlur} onChange={ debounce( onBlur, 2000 )} placeholder="Enter生效" />
			</FormItem>
			<FormItem label="字体" name="titleFontSize" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<Editor
					config={config}
					form={form}
					onValuesChange={onValuesChange}
					fontFamilyName="titleFontFamily"
					fontSizeName="titleFontSize"
					fontColorName="titleFontColor"
					boldName="titleIsBold"
					italicName="titleIsItalic"
					underLineName="titleIsUnderLine"
					alignHorName="titleAlignHor"
					alignVerName="titleAlignVer"
				/>
			</FormItem>
			<FormItem label="标题框高度" name="tilteHight" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<InputNumber onBlur={onBlur} onPressEnter={onBlur} style={{ width: '100%' }} placeholder="默认为40px" />
			</FormItem>
			<FormItem label="标题框背景色" name="titleBg" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<InputColorPicker
					color={titleBgColor}
					change={handleChangeBgColorComplete}
				></InputColorPicker>
			</FormItem>
		</div>
	);
};

export default React.memo( Title );
